<!DOCTYPE html>
<html>
<head>
	<title></title>
	<!-- <script src="http://api.map.baidu.com/api?v=3.0&ak=N2SUrQBNFOvHgkW6CffrXHl1rmuWGnoS"></script> -->
  <script src="https://api.map.baidu.com/api?ak=Y2VZjezayyyUmDmIQWf5Xik7p6gpvuGg&v=2.0&s=1"></script>
  <script>
    //GPS坐标转换成百度坐标(官方提供接口转换)
    function gpsTobaidu(lng,lat,fn){
      var p = new BMap.Point(x, y);
      var convertor = new BMap.Convertor();
      //[p] 这里一次最多可以传入10个点
      convertor.translate([p], 1, 5, function(data){
        if(data.status === 0) {
          if(fn) fn(data.points[0])
        }else{
          if(fn) fn(null)
        }
      })
    }
    //GPS坐标转换成火星坐标
    function wgs2gcj(lat,lng) {
      var M_PI = 3.14159265358979324;
      var a = 6378245.0;
      var ee = 0.00669342162296594323;
      var x_pi = M_PI * 3000.0 / 180.0;
      function wgs2gcj_lat(x, y) {
        var ret1 = -100.0 + 2.0 * x + 3.0 * y + 0.2 * y * y + 0.1 * x * y  + 0.2 * Math.sqrt(Math.abs(x));
        ret1 += (20.0 * Math.sin(6.0 * x * M_PI) + 20.0 * Math.sin(2.0 * x  * M_PI)) * 2.0 / 3.0;
        ret1 += (20.0 * Math.sin(y * M_PI) + 40.0 * Math.sin(y / 3.0 * M_PI)) * 2.0 / 3.0;
        ret1 += (160.0 * Math.sin(y / 12.0 * M_PI) + 320 * Math.sin(y * M_PI  / 30.0)) * 2.0 / 3.0;
        return ret1;
      }
      function wgs2gcj_lng(x, y) {
        var ret2 = 300.0 + x + 2.0 * y + 0.1 * x * x + 0.1 * x * y + 0.1  * Math.sqrt(Math.abs(x));
        ret2 += (20.0 * Math.sin(6.0 * x * M_PI) + 20.0 * Math.sin(2.0 * x  * M_PI)) * 2.0 / 3.0;
        ret2 += (20.0 * Math.sin(x * M_PI) + 40.0 * Math.sin(x / 3.0 * M_PI)) * 2.0 / 3.0;
        ret2 += (150.0 * Math.sin(x / 12.0 * M_PI) + 300.0 * Math.sin(x / 30.0  * M_PI)) * 2.0 / 3.0;
        return ret2;
      }
      var poi2 = {};
      var dLat = wgs2gcj_lat(lng - 105.0, lat - 35.0);
      var dLon = wgs2gcj_lng(lng - 105.0, lat - 35.0);
      var radLat = lat / 180.0 * M_PI;
      var magic = Math.sin(radLat);
      magic = 1 - ee * magic * magic;
      var sqrtMagic = Math.sqrt(magic);
      dLat = (dLat * 180.0) / ((a * (1 - ee)) / (magic * sqrtMagic) * M_PI);
      dLon = (dLon * 180.0) / (a / sqrtMagic * Math.cos(radLat) * M_PI);
      poi2.lat = lat + dLat;
      poi2.lng = lng + dLon;
      return poi2;
    }

    //火星坐标转百度坐标
    function gcj2bd(lat,lng) {
      var poi2 = {};
      var x = lng, y = lat;
      var z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * x_pi);
      var theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * x_pi);
      poi2.lng = z * Math.cos(theta) + 0.0065;
      poi2.lat = z * Math.sin(theta) + 0.006;
      return poi2;
    } 
    //百度坐标转高德（传入经度、纬度）
    function bd_decrypt(bd_lng, bd_lat) {
        var X_PI = Math.PI * 3000.0 / 180.0;
        var x = bd_lng - 0.0065;
        var y = bd_lat - 0.006;
        var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * X_PI);
        var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * X_PI);
        var gg_lng = z * Math.cos(theta);
        var gg_lat = z * Math.sin(theta);
        return {lng: gg_lng, lat: gg_lat}
    }
    //高德坐标转百度（传入经度、纬度）
    function bd_encrypt(gg_lng, gg_lat) {
      var X_PI = Math.PI * 3000.0 / 180.0;
      var x = gg_lng, y = gg_lat;
      var z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * X_PI);
      var theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * X_PI);
      var bd_lng = z * Math.cos(theta) + 0.0065;
      var bd_lat = z * Math.sin(theta) + 0.006;
      return { lng: bd_lng, lat:bd_lat }
    } 

  function getMyPoint(call){
    var geolocation = new BMap.Geolocation();    
    var gc = new BMap.Geocoder();   
    geolocation.getCurrentPosition( function(r) {   //定位结果对象会传递给r变量  
      console.log(555555555,r)
      if(this.getStatus() == BMAP_STATUS_SUCCESS){  
        //通过Geolocation类的getStatus()可以判断是否成功定位。  
        var pt = r.point;   
        // map.panTo(pt);//移动地图中心点
        //alert(r.point.lng);//X轴
        //alert(r.point.lat);//Y轴 
        //返回详细位置，例如[上海市]
        gc.getLocation(pt, function(rs){    
          if(call) call(pt, rs); 
        }); 
      }else{  
        //关于状态码    
        //BMAP_STATUS_SUCCESS   检索成功。对应数值“0”。    
        //BMAP_STATUS_CITY_LIST 城市列表。对应数值“1”。    
        //BMAP_STATUS_UNKNOWN_LOCATION  位置结果未知。对应数值“2”。    
        //BMAP_STATUS_UNKNOWN_ROUTE 导航结果未知。对应数值“3”。    
        //BMAP_STATUS_INVALID_KEY   非法密钥。对应数值“4”。    
        //BMAP_STATUS_INVALID_REQUEST   非法请求。对应数值“5”。    
        //BMAP_STATUS_PERMISSION_DENIED 没有权限。对应数值“6”。(自 1.1 新增)    
        //BMAP_STATUS_SERVICE_UNAVAILABLE   服务不可用。对应数值“7”。(自 1.1 新增)    
        //BMAP_STATUS_TIMEOUT   超时。对应数值“8”。(自 1.1 新增)    
        switch( this.getStatus() ){  
          case 2: 
            if(call) call(null, '位置结果未知 获取位置失败');  
          break;  
          case 3:
            if(call) call(null, '导航结果未知 获取位置失败');
          break;  
          case 4:  
            if(call) call(null, '非法密钥 获取位置失败');
          break;  
          case 5:  
            if(call) call(null, '对不起,非法请求位置  获取位置失败');        
          break;  
          case 6:  
            if(call) call(null, '对不起,当前 没有权限 获取位置失败');        
          break;  
          case 7:  
            if(call) call(null, '对不起,服务不可用 获取位置失败');        
          break;  
          case 8:  
            if(call) call(null, '对不起,请求超时 获取位置失败');        
          break;     
        }  
      }          
    },{enableHighAccuracy: true})
  }
  </script>
	<style type="text/css">
    /*隐藏百度地图log*/
    .anchorBL{
      display: none;
    }
    /*标注信息展示*/
    .my_marker_label{
      position:absolute;
      bottom:0px;
      left:50%;
      transform:translateX(-50%);
      padding:15px 15px 10px 15px;
      background:#4fc08d;    
      border-radius: 5px;
      box-shadow: 0px 0px 10px #666;  
      cursor: pointer;
    }
    .my_marker_close{
    	position: absolute;
    	z-index: 3;
    	top:0;
    	right: 0;
    	height: 20px;
    	width: 20px;
    	border-radius: 50%;
    }
    .my_marker_close:before{
    	content: "✕";
    	display: flex;
    	height: 100%;
    	width: 100%;
    	justify-content: center;
    	align-items: center;
    	color: #fff;
    }
    .my_marker_body{
      position: relative;
      z-index: 2;
      color: #fff;
      font-size: 14px;
      font-weight: bold;
    }
    .my_marker_body>span{
      font-weight: lighter;
    }
    .my_marker_label_arrow{
      position:absolute;
      bottom:-10px;
      left:50%;
      width:16px;
      height:16px;
      background:#4fc08d;
      transform:rotate(45deg) translateX(-50%);
    }
    /*标注底部动画*/
    #_mark_animation_{
      overflow: visible !important;
      z-index: 50;
    }
    #_mark_animation_:hover{
      /*z-index: 100;*/
    }
    #_mark_animation_>img{
      position: relative;
      z-index: 5;
    }
    #_mark_animation_ > div{
      box-sizing: border-box;
      position: absolute;
      width: 60px;
      height: 60px;
      left: 50%;
      top: 100%;
      margin-top: -30px;
      margin-left: -30px;
      border: 3px solid #4fc08d;
      background: rgba(0, 195, 146,0.7);
      -webkit-border-radius: 50%;
      border-radius: 50%;
      opacity: 0;
    }
    #_mark_animation_ > div:nth-child(2){
      animation: color 3s ease-out infinite;
    }
    #_mark_animation_ > div:nth-child(3){
      animation: color 3s ease-out 1s infinite;
    }
    #_mark_animation_ > div:nth-child(4){
      animation: color 3s ease-out 2s infinite;
    }
    @keyframes color {
      0% {
        transform: scale(0.1);
        opacity: 1;
      }
      100% {
        transform: scale(1);
        opacity: 0;
      }
    }		
	</style>
</head>
<body>
<div id="mapBox" style="height: 500px;width: 600px;"></div>
<script>
//创建Map实例
var map = new BMap.Map("mapBox",{
  enableMapClick: false             //禁用景点点击
}); 


// lng: 114.029366
// lat: 22.521901

// var point = new BMap.Point(114.029366, 22.521901);
map.centerAndZoom("福田市民中心",14);    //用城市名设置地图中心点,及缩放值14
// map.centerAndZoom(point, 15);       //用经纬度设置地图中心点,及缩放值14
// map.disableDragging();           //禁用地图拖拽事件
// map.disableScrollWheelZoom();       //启用鼠标滚轮缩放地图(默认)
map.enableScrollWheelZoom();     //启用鼠标滚轮缩放地图
map.disableDoubleClickZoom();       //禁用鼠标双击放大
map.disableKeyboard();              //禁用键盘上下左右键移动地图(默认)


  //获取中心点的坐标
  // setTimeout(()=>{
  //   var pt = map.getCenter();
  //   console.log(pt)
  // },1000)


  //将GPS坐标 转换成 百度坐标
  // var x = 114.02597366;
  // var y = 22.54605355;
  // var p = new BMap.Point(x, y);
  // //添加gps marker和label
  // var markergg = new BMap.Marker(p);
  // map.addOverlay(markergg); //添加GPS marker
  // var labelgg = new BMap.Label("未转换的GPS坐标（错误）",{offset:new BMap.Size(20,-10)});
  // markergg.setLabel(labelgg); //添加GPS label

  // gpsTobaidu(x,y,res=>{
  //   console.log(555555,res)
  // })


getMyPoint((p,r)=>{
  // var p = new BMap.Point(x, y);
  //添加gps marker和label
  var markergg = new BMap.Marker(p);
  map.addOverlay(markergg); //添加GPS marker
  var labelgg = new BMap.Label("我的位置",{offset:new BMap.Size(20,-10)});
  markergg.setLabel(labelgg); //添加GPS label

  console.log(p,r)
})

  // H5获取 GPS 坐标
  // navigator.geolocation.getCurrentPosition(position=>{
  //   var x = position.coords.longitude;
  //   var y = position.coords.latitude;
  //   console.log(x,y)
  // })


var ps = [
	[114.027944, 22.522768],
  // [114.02597366, 22.54605355],               //获取的我的位置  lng: 114.02593, lat: 22.546015
	[114.06617390684634, 22.54935250857916]    //市民中心
];

ps.forEach(v=>{
	// var marker = set_marker(v[0], v[1], map);
})

//设置标注覆盖物，并添加点击事件
function set_marker(lng,lat,map){
	var point = new BMap.Point(lng, lat);
	var marker = new BMap.Marker(point);            //创建默认标注
	// 创建自定义图标标注
	// var myIcon = new BMap.Icon(url, new BMap.Size(28, 31), {
	//   imageSize: new BMap.Size(28, 31),
	// });
	// var marker = new BMap.Marker(point, {icon: myIcon,});  
	map.addOverlay(marker);                         //将标注添加到地图实例中	

	//标注点击事件
	marker.addEventListener("click",function(){
		// console.log(marker == this);     //true
		if(map.my_active_marker == this) return;
		if(map.my_active_marker){
			//关闭当前标注信息展示和底部的波浪效果
			close_label(map.my_active_marker, map.my_active_marker.label);
		}
		map.my_active_marker = this;	  //自定义变量保存当前的激活的标注
		this.setTop(true);                //设置此标注覆盖物置顶,防止遮挡
		var p = this.getPosition();       //获取marker的位置
		console.log("marker的位置是" + p.lng + "," + p.lat); 
		// marker.setAnimation(BMAP_ANIMATION_BOUNCE);  //设置标注跳动的动画

		//设置标注信息覆盖物
		set_marker_label(this)

		var point = new BMap.Point(p.lng, p.lat);
		// this.map.setCenter(point);
		// this.map.getZoom();         // 获取当前地图的比例尺
		// this.map.setZoom(zoom);     // 设定比例尺
		map.panTo(point);              //平移到指定点
	});
	return marker;
}
//设置标注信息覆盖物
function set_marker_label(marker){
	//如果该标注已经设置了label，则直接显示label即可
	if(marker.label){
		// label.setContent(content);     //设置标注内容
		marker.label.setStyle({ display:'block'});
		marker.Zc.id = '_mark_animation_';		
		return;
	}
	//设置标注下的波浪效果
	marker.Zc.id = '_mark_animation_';
	marker.Zc.innerHTML += '<div></div><div></div><div></div>';
	var content = `
	<div class="my_marker_label">
	  <div class="my_marker_close"></div>
	  <div class="my_marker_body">
	    名称名称名称<br>
	    <span>1234556</span>
	  </div>
	  <span class="my_marker_label_arrow"></span>
	</div>`;
	var offset = new BMap.Size(6, -10);     //设置标注信息覆盖物位置的偏移
	var label = new BMap.Label(content, {   //创建标注信息覆盖物
	  offset: offset
	});
	label.setStyle({
	  width:'0',
	  height:'0',
	  // display:'none',
	  // borderRadius: "3px",
	  zIndex: '9999',
	});

	marker.setLabel(label);  
	//点击label右上角关闭按钮操作
	label.ba.onclick=function(e){
		if(e.target.className=='my_marker_close'){
			map.my_active_marker = null;
			close_label(marker,label)
		}
	};
	marker.label = label;		//将label对象绑定到标注上方便以后使用
	return label;
}
//关闭标注信息展示和底部的波浪效果
function close_label(marker,label){
  label.setStyle({ display:'none' })
  marker.setTop(false);   //将当前覆盖物取消置顶
  var ele = document.getElementById('_mark_animation_');
  if(ele) ele.id = '';    //取消底部波浪动画
}
//显示或影藏标注
function marker_toggle(marker,flag){
  if(flag) marker.show();   //显示标注
  marker.hide();            //影藏标注
}
//清除所有覆盖物
function clear_marker(map){
  map.clearOverlays();    //清除所有覆盖物
}
</script>
</body>
</html>